import React from 'react';
import { Steps } from 'antd';
import styles from './index.less';

const { Step } = Steps;
const TaskSteps = ({ stepList, step, style }) => {
    // 获取列表

    const getCurrent = list => {
        let nowStep = 0;
        list.forEach((item, index) => {
            if (item.stepStatus === 1) {
                nowStep = index;
            }
        });
        if (list.length === nowStep + 1) {
            return nowStep + 2;
        }
        return nowStep + 1;
    };

    return (
        <Steps
            current={getCurrent(stepList, step)}
            className={styles.taskSteps}
            labelPlacement="vertical"
            style={style}
        >
            <Step
                icon={
                    <span
                        style={{
                            background: '#fff',
                            display: 'inline-block',
                            width: '16px',
                            height: '16px',
                            borderRadius: '50%',
                            border: '1px solid #FFA22D',
                            marginLeft: '6px'
                        }}
                    ></span>
                }
            />
            {stepList &&
                stepList.map((item, index) => {
                    if (item.taskId) {
                        return (
                            <Step
                                key={item.stepName}
                                // status={item.stepStatus === 1 ? 'finish' : 'wait'}
                                title={item.stepName}
                                icon={
                                    item.stepStatus === 1 || (index === 0 && !item.stepStatus) ? (
                                        <i className="icon iconfont iconjihuawancheng" style={{ fontSize: '22px' }}></i>
                                    ) : (
                                        <i className="icon iconfont iconweikaishi" style={{ fontSize: '22px' }}></i>
                                    )
                                }
                            />
                        );
                    }
                    return <Step key={item} title={item} />;
                })}
            <Step
                icon={
                    <span
                        style={{
                            background:
                                getCurrent(stepList, step) - 1 === stepList.length ? '#FFA22D' : 'rgba(0,0,0,.25)',
                            display: 'inline-block',
                            width: '16px',
                            height: '16px',
                            borderRadius: '50%'
                        }}
                    ></span>
                }
            />
        </Steps>
    );
};
export default TaskSteps;
